<template>
  <div class="form-panel">
    <div class="form-panel_header">
      <div class="title">{{ title }}</div>
      <div class="tool" v-if="!readonly">
        <el-button @click="handleAdd" type="primary" text>添加</el-button>
      </div>
    </div>
    <div class="form-panel_con">
      <div v-for="item, index in  curValue " class="con-row">
        <el-form class="form-con" :ref="el => formRefs[index] = el" label-position="top" :model="item">
          <AgelFormGrid v-if="!readonly" :items="form.baseItems" :span="12" :gutter="16">
            <template #slot-num-range>
              <num-range
                v-model:startValue="item['amountFloor']"
                v-model:endValue="item['amountRoof']"
                startPlaceholder="请输入金额上限"
                endPlaceholder="请输入金额下限"
              ></num-range>
            </template>
          </AgelFormGrid>
          <AgelFormDesc v-else :items="form.baseItems" :column="2" :gutter="16">
            <template #slot-num-range>
              <span>{{ (item['amountFloor']/100 || '-') + ' ~ ' + (item['amountRoof']/100 || '-') }}</span>
            </template>
          </AgelFormDesc>
        </el-form>
        <el-button v-if="!readonly" @click="handleDelete(index)" type="danger" text>删除</el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { BizContractIncentiveVo, defaulIncentiveModel } from '@/api/operation/contract/types';
const props = defineProps({
  title: {
    type: String,
    default: '激励分成'
  },
  modelValue: {
    type: Array,
    default: () => []
  },
  readonly: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(['update:modelValue']);

const curValue = computed<Array<BizContractIncentiveVo>>({
  get: () => {
    if (props.modelValue && props.modelValue.length > 0) {
      return props.modelValue;
    } else {
      return [defaulIncentiveModel()];
    }
  },
  set: (val) => {
    emits('update:modelValue', val);
  }
});

watch(
  () => curValue.value,
  async (val) => {
    emits('update:modelValue', val);
  },
  { deep: true, immediate: true }
);

const formRefs = ref([]) as Ref<string[]>;

const form = reactive({
  baseItems: [
    { prop: 'amountRoof', label: '激励区间（元）', required: false, slot: 'slot-num-range' },
    { prop: 'bonusRatio', label: '分成比例（%）', required: false, attrs: { type: 'number' } }
  ]
});

const validate = () => {
  return new Promise<boolean>((resolve, reject) => {
    formRefs.value.forEach((el) => {
      resolve(true);

      // el.validate((valid, fields) => {
      //   if (valid) {
      //     resolve(true);
      //   } else {
      //     resolve(false);
      //   }
      // });
    });
  });
};

const handleAdd = () => {
  curValue.value.push(defaulIncentiveModel());
};
const handleDelete = (index) => {
  curValue.value.splice(index, 1);
};
defineExpose({ validate });
</script>
<style lang="scss" scoped>
.form-panel {
  width: 100%;
  background: #f6f7fb;

  &_header {
    width: 100%;
    display: flex;
    padding: 8px 16px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
      color: #323a45;
    }
  }

  &_con {
    width: 100%;

    .con-row {
      width: 100%;
      display: flex;
      overflow: hidden;
      padding: 8px 16px 16px;
      align-items: end;
    }

    .form-con {
      flex: 1;
      overflow: hidden;
      margin-right: 12px;
    }
  }
}
</style>